<template>
  <div class="licenseImgBox">
    <div class="mask" v-show="loading"><a-spin /></div>
    <!-- <a-spin :spinning="loading"> -->
    <a-row class="rows" type="flex" justify="start" align="middle" :gutter="[16, 16]"> 
      <viewer class="viewer" :options="options" :images="imgdata">
      <a-empty v-if="!imgdata.length&&!editable" description="暂无数据" style="width: 100%"/>
      <a-col :span="6" class="cols" v-for="(item, ind) in imgdata" :key="ind">
        <div class="imgCells">
          <div class="imgBox">
            <div class="re">
                <!-- <div class="delectImg"><a-icon  type="delete" theme="filled" /></div> -->
                <a-icon v-if="editable"  type="delete" theme="filled" class="delete" @click="onDelectImg($event,item)" />
                <img 
                  :src="imgbaseurl + item.zhengZhaotpurl"   
                  :data-src="imgbaseurl + item.zhengZhaotpurl"
                  :alt="item.zhengZhaosm"> 
            </div>
          </div>
          <div class="imgInfo">{{ item.zhengZhaosm}}</div>
        </div>
      </a-col>
      <a-col :span="6" class="cols" v-if="editable"  >
        <div class="imgCellsupImgBtn">
          <!-- <a-form-model :model="form"> -->
          <!-- <a-form-model-item   :wrapper-col="{ span: 24 }" prop="contentImg"> -->
          <!-- <ImgUpload v-model="form.contentImg" @change="imgUploaded"> </ImgUpload> -->
          <!-- </a-form-model-item> -->
          <!-- </a-form-model> -->
          <div class="upImgBtn" @click="onAddImg">
            <div class="icon">
              <a-icon type="plus" />
            </div>
            <div class="ant-upload-text">添加图片</div>
          </div>
        </div>
      </a-col>
      </viewer>
    </a-row>
    <!-- </a-spin> -->
    <div class="clearfloat"></div>
    <basic-modal  :modalOpt="addImgModal" :footer="null" @closeModal="closeAddModal">
      <template>
        <basic-form
          :formInfos="imgFormInfo"
          :formDatas="imgformDatas"
          :rules="imgrules"
          :buttonText="['提交','重置']"
          @onSubmit="onSubmitImgInfo"
        ></basic-form>
      </template>
    </basic-modal>
  </div>
</template>

<script>
import basicForm from '../common/basicForm'
import basicModal from '../common/basicModal'
import ImgUpload from '@/views/sys/modules/upload/ImgUpload'
import baseapi from '@/api/base'
import { addLicenseImg, getZZImgByzzpid,deleteLicenseImg} from './licenseImg'

const imgFormInfo = [
  { label: '证照类型', name: 'zhengZhaolxmc', type: 'dicselect',dicName: 'zhengZhaolx', placeholder: '请选择' },
  // { label: '证照类型', name: 'zhengZhaolxmc', type: 'dicselect',isDisabled:true, dicName: 'zhengZhaolx', placeholder: '请选择' },
  { label: '证照说明', name: 'zhengZhaosm', type: 'textarea', placeholder: '请输入证照说明' },
  { label: '上传图片', name: 'zhengZhaotpurl', type: 'uploadimg' },
  { label: '多上传图片', name: 'imgs', type: 'uploadimgs' },
]
const imgformDatas = {
  zhengZhaoPid: '',
  zhengZhaolxmc: '',
  zhengZhaosm: '',
  zhengZhaotpurl: '',
  zhengZhaoxsurl: '',
  imgs:''
}
const imgrules = {
  zhengZhaolxmc: [{ required: true, message: '必填', trigger: 'blur' }],
  zhengZhaosm: [{ required: true, message: '必填', trigger: 'change' }],
  zhengZhaotpurl: [{ required: true, message: '必填', trigger: 'change' }],
  imgs: [{ required: true, message: '必填', trigger: 'change' }],
}
export default {
  props: {
    zzPid: {
      type: String,
    },
    zhengZhaolx: {
      type: String,
    },
    licenseImgData: {
      type: Array,
    },
    editable: {
      type: Boolean,
      default:true
    },
  },
  components: {
    ImgUpload,
    basicModal,
    basicForm,
  },
  data() {
    return {
      imgFormInfo: imgFormInfo,
      imgformDatas: imgformDatas,
      imgrules: imgrules,
      imgbaseurl: baseapi.imgShowUrl,
      addImgModal: {
        modalVisible: false,
        modalTitle: '添加证照图片',
        modalWidth: '60vw',
      },
      options: {
        url: 'data-src'
      },
      imgdata: [],
      loading:true
    }
  },
  watch: {
    zzPid(val, oldVal){
        console.log(this.zzPid);
        this.imgformDatas.zhengZhaoPid = this.zzPid
        this.imgformDatas.zhengZhaolxmc = this.zhengZhaolx
        this.getZZImgBypid()

    }
  },
  created(){
    console.log('imgcreate');
  },
  mounted() {
    this.imgformDatas.zhengZhaoPid = this.zzPid
    this.imgformDatas.zhengZhaolxmc = this.zhengZhaolx
    if(this.zzPid){
      this.getZZImgBypid()
    }
    
  },
  methods: {
    onAddImg() {
      this.addImgModal.modalVisible = true
    },
    onSubmitImgInfo(val) {
      console.log(val)
      this.saveSuppierInfo(val)
    },
    async getZZImgBypid() {
      this.loading=true
      console.log(this.zzPid)
      let pa = {
        zhengZhaoPid: this.zzPid,
      }
      let res = await getZZImgByzzpid(pa)
      if (res && res.code && res.code === 'C1' && res.data) {
        this.imgdata = res.data
        this.loading=false
        this.$emit('getImgs',res.data.length)
      }
      console.log(res)
    },
    // 上传图片
    async saveSuppierInfo(val) {
      let key = 'updatable'
      this.$message.loading({ content: '提交中', key ,duration: 0})
      let res = await addLicenseImg(val)
      console.log(res)
      if (res && res.code && res.code === 'C1' && res.data) {
        this.$message.success({ content: '提交成功', key, duration: 2 })
        this.getZZImgBypid()
        this.$emit('uploadSuccess')
        this.closeAddModal()
      } else {
        this.$message.success({ content: '提交失败，请稍后重试', key, duration: 2 })
      }
    },
    async onDelectImg(e,item){
      // deleteLicenseImg
      console.log(item);
      let key = 'updatable'
      this.$message.loading({ content: '正在删除', key })
      let res = await deleteLicenseImg(item)
      console.log(res)
      if (res && res.code && res.code === 'C1' && res.data) {
        this.$message.success({ content: '删除成功', key, duration: 2 })
        this.getZZImgBypid()
        this.$emit('deleteSuccess')
      } else {
        this.$message.success({ content: '提交失败，请稍后重试', key, duration: 2 })
      }
    },
    closeAddModal() {
      this.addImgModal.modalVisible = false
    },
  },
}
</script>

<style scoped>
.clearfloat {
  clear: both;
  height: 0;
}
.licenseImgBox {
  width: 100%;
  min-height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.mask{
  height: 100%;
  width: 100%;
  background-color: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 100;
  opacity:0.9;
}

.licenseImgBox .rows {
  width: 100%;
  margin-bottom: 10px;
}
.viewer{
 width: 98%;
}
.cols {
  /* border: 1px solid teal;   */
  display: flex;
  justify-content: center;
  align-items: center;
}
.imgCells {
  /* background-color: #ccc; */
  width: 100%;
  height: 30vh;
}
.imgBox{
  height: 27vh;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed #eee;
}
.imgBox img {
  display: block;
  max-height: 27vh;
  max-width: 100%;

}
.imgBox img:hover{
  cursor:pointer
}
.imgBox img:hover .delectImg{
  opacity: 1;
}
.re{
  position: relative;
}
.delete{
  color: #666;
  font-size: 20px;
  position: absolute;
  top:0;
  right: 0;
  height: 15px;
  width: 100%;
  text-align: right;
  z-index: 100;
}
.delectImg{
  /* opacity: 0; */
  color: red;
  font-size: 18px;
  height: 20px;
  width: 100%;
  background-color: #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 0;
  left: 0px;
  z-index: 100;
  background: rgba(256, 256, 256, 0.3);
}
.delectImg:hover,.delete:hover{
  cursor:pointer;
}
.imgInfo{
    text-align: center;
}
.imgCellsupImgBtn {
  width: 100%;
  height: 30vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.upImgBtn {
  width: 13vh;
  height: 13vh;
  background-color: #eee;
  border: 1px dashed #ccc;
  border-radius: 3px;
}
.icon {
  line-height: 7vh;
  width: 100%;
  text-align: center;
  font-size: 25px;
  color: #777;
}
.ant-upload-text {
  text-align: center;
  font-size: 14px;
  color: #777;
}

</style>